<template>
    <div class="star" :class="starType">
        <span v-for="t in itemClass" class="star_item" :class="itemClass"></span>
    </div>
</template>

<script>
export default {
    props: {
        size: {
            type: Number
        },
        score: {
            type: Number
        }
    },
    data() {
        return {}
    },
    computed: {
        starType() {
            return 'star_' + this.size;
        }
    }
};
</script>

<style scoped>
.star {
    font-size: 0;
}

.star_item {
    display: inline;
    background-repeat: no-repeat;
}

.star.star_48 .star_item {
    width: 20px;
    height:20px;
    margin-right:22px;
    background-size:20px 20px;
}

.star.star_36 {}

.star.star_24 {}
</style>
